//git config --global user.name '冯净修' 
//git config --global user.email '15167825239@163.com'
//git add .
//git commit -m ""
//git push -u origin master

<script lang="ts" setup>
    import { ref,reactive, computed ,watch,watchEffect, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'
    import MyList from './MyList.vue'
    import {type person} from "@/type"
// import MyInput from './MyInput.vue';

    // let name = ref("哈基羊")

    // function updateName(){
    //             name.value = "哈基厅"
    //             console.log(name)
    //         }

    // let img1 = ref("https://img2.baidu.com/it/u=37958264,2278279635&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1778")

    // function updateimg(){
    //     img1.value = "https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=7ea52b3276094b36dbc713e996fc50ef/63d0f703918fa0ec47f2b1e0269759ee3d6ddb22.jpg"
    //     console.log("111")
    // }

    // let isborder = ref(true)

    // let car = ref({brand:"大众",color:"red"})
    // function changCar(){
    //     car.value.brand = "迈腾"
    // }

    // let dasb = ref("hexinda")
    // let ischecked = ref(true)

    // function updatecheck(){
    //     if(ischecked.value){
    //     console.log("现在是勾选状态")
    // }else
    // {
    //     console.log("现在是未勾选状态")
    // }
    // }

    // let username = ref("霍元甲")
    // let selectOption = ref("上海")
    // let user = ref({
    //     ischecked:true,
    //     username:"霍元甲",
    //     selectOption:"上海",
    //     classSelect:true
    // })

    // function changeclass(event:Event){
    //     user.value.classSelect = (event.target as HTMLInputElement).checked
    // }


    // let mys = ref("my_border2")
    // function changeInputStyle(data:string){
    //     console.log(data)
    //     mys.value = "my_border2"
    // }

    // const firstname = ref("王")
    // const lastname = ref("五")
    // const fullname = computed(()=>{
    //     let fullname = firstname.value + lastname.value
    //     console.log(fullname)
    //     return fullname
    // })

    // function fn(){
    //     let fullname = firstname.value + lastname.value
    //     console.log(fullname)
    //     return fullname
    // }

    // const name = ref("刘羊")
    // const age = ref(18)
    // watch(name,(newValue,oldValue)=>{
    //     console.log(newValue,oldValue)
    // },{immediate:true})
    // const stopwatch = watch([name,age],(newValue,oldValue)=>{
    //     console.log(newValue,oldValue)
    //     if(newValue[1]>30){
    //         stopwatch()
    //     }
    // })
    // function updateName(){
    //     name.value = "苏中挺"
    // }
    // function updateAge(){
    //     age.value++
    // }

    // const person = ref({
    //     name:"李四",
    //     age:23
    // })
    // // watch(person,(newValue,oldValue)=>{
    // //     console.log(newValue,oldValue)
    // // },{deep:true})
    // function updatePerson(){
    //     person.value = {
    //     name:"王五",
    //     age:66
    // }
    // }
    // function updatePersonName(){
    //     person.value.name = "赵六"
    // }
    // function updatePersonAge(){
    //     person.value.age = 86
    // }

    // watch([()=>person.value.name,()=>person.value.age],(newValue,oldValue)=>{
    //     console.log(newValue,oldValue)
    // })

    // let person2 = reactive({
    //     name:"核心大",
    //     age:38
    // })
    // function updatePerson2Name(){
    //     person2.name = "鸟大"
    // }
    // function updatePerson2Age(){
    //     person2.age = 46
    // }
    // function updatePerson2(){
    //     Object.assign(person2,{name:"hexinda",age:250})
    // }
    // //对于reactive定义对象的监视，默认是深度监视
    
    // watchEffect(()=>{
    //     console.log(age.value)
    //     if(age.value > 30){
    //         console.log("哇从豆嘎啊")
    //     }
    // })
    
        //vue的指令 v-bind,v-model,v-on
    //1.v-if/v-else/v-else
    let score = ref(95)
    function updateScore(){
        score.value--
    }
    let visible = ref(true)

    let persons:person[] = [{id:"one",name:"张三",age:18},{id:"two",name:"李四",age:20},{id:"three",name:"王五",age:68}]
    
    let time = ref(null)
    //生命周期
    //beforeCreate和created
    let a = ref(1)
    onBeforeMount(()=>{
        console.log("下载还没有挂载mount")
    })
    onMounted(()=>{
        console.log("挂载好了")
        //从服务器springboot接口获取数据
        //显示数据
        //挂载后才能操作元素跟数据
        const divelement =  document.getElementById("mydiv")
        console.log(divelement)
        console.log(time.value)

    })
    onBeforeUpdate(()=>{
        console.log("在更新之前")
    })
    onUpdated(()=>{
        console.log("更新之后")
    })
    onBeforeUnmount(()=>{
        console.log("卸载之前")
    })
    onUnmounted(()=>{
        console.log("卸载完毕")
    })
    let age = ref(18)
    let books = ref([{title:"斗罗大陆",content:"海神唐三"},
                {title:"斗罗大陆2",content:"绝世唐门"},
                {title:"斗罗大陆3",content:"龙王传说"},
                {title:"斗罗大陆4",content:"终极斗罗"}
    ])

</script>



<template>
  <!-- <h3>{{ name }}</h3>
  <button @click="updateName">改名</button>
   
   <img v-bind:src="img1" alt="">
   <button @click="updateimg">改图片</button>

    <hr>
    <div :class="{my_boder1:isborder,my_boder2:!isborder}">我是一个div</div>

    <h4>{{ car.brand }}----{{ car.color }}</h4>
    <button @click="changCar">改车</button>

    <h3>{{ dasb }}</h3>
    <input type="checkbox" v-model="user.ischecked"/>男
    <br>
    姓名：<input type="text" v-model="user.username"/>
    城市<select v-model="user.selectOption">
        <option>杭州</option>
        <option>温州</option>
        <option>上海</option>

    </select>

    <input type="checkbox" :checked="user.classSelect" @change="changeclass">班级1 -->

    <!-- <MyInput :mystyle="mys" :msg="1122" @xxx="changeInputStyle" />

    <button @click="changeInputStyle('hello')">改变输入框样式</button> -->

    <!-- 姓：{{ firstname }}<br>
    名：{{ lastname }}<br>
    全名：{{ fullname }}<br>
    全名：{{ fullname }}<br>
    全名：{{ fullname }}<br> -->

    <!-- <h1>{{ name }}--{{ age }}</h1>
    <button @click="updateName">改名</button>
    <button @click="updateAge">改年龄</button>
    <h1>{{ person.name }}</h1>
    <h1>{{ person.age }}</h1>
    <button @click="updatePersonName">改personName</button>
    <button @click="updatePersonAge">改personAge</button>
    <button @click="updatePerson">改person</button>
    <hr>
    <h1>{{ person2.name }}</h1>
    <h1>{{ person2.age }}</h1>
    <button @click="updatePerson2Name">改person2Name</button>
    <button @click="updatePerson2Age">改person2Age</button>
    <button @click="updatePerson2">改person2</button> -->
    <h1>分数:{{ score }}</h1>
    <div v-if="score > 90">优秀</div>
    <div v-else-if="score > 60">及格</div>
    <div v-else>不及格</div>
    <button v-on:click="updateScore">修改分数</button>
    <p v-show="score < 90">这段文字会根据一个变量来控制显示或隐藏</p>
    <hr>
    {{ a }}
    <div ref="time">2025/5/21--11.34</div>
    <div id="mydiv">这只是笋尖的问题</div>
    <hr>
    <!-- <ul>
        <li v-for="p in persons" :key="p.id" >{{ p.id }}--{{p.name}}--{{ p.age }}</li>
    </ul> -->
    <!-- <MyList :xxx="persons" ></MyList> -->
    <MyList :items="books">
        <!-- <template v-slot v-if="age < 20">
            <h1>默认插槽</h1>
            <div>刘羊是个大笨蛋</div>
        </template>
        <template #header>
            <h1>具名插槽</h1>
            <div>算了,刘羊天天开心</div>
        </template>
        <template #bbbb>
            <h1>动态插槽</h1>
            <div>《云边有个小刘羊》</div>
        </template> -->
        <template v-slot:header="data">
            <h1  class="title">共有{{ data.nums }}本书</h1>
        </template>

        <template v-slot="{it,ind}">
            <div class="item">{{ ind+1 }}.{{ it.title }}-{{ it.content }}</div>

        </template>

        <template #footer>
            <h1  class="footer">感谢阅读</h1>
        </template>
    </MyList>
</template>



<style scoped>
    /* button{
        margin-bottom: 10px;
    }
    img{
        height: 400px;
        width: 350px;
    }
    .my_boder1{
        border:1px solid red;
    }
    .my_boder2{
        background-color: aqua;
    } */
    .title{
        color: brown;
    }
    .footer{
        text-align: right;
        font-style: italic;
    }
    .item{
        color: red;
        font-weight: bolder;
    }
</style>
